<template>
  <div>
    <div>
      <el-button type="primary" style="margin-left: 10px" plain @click="addLabel()"
        >新增</el-button
      >
      <div class="label_list">
        <div style="padding: 10px 0 0 10px">已有区域</div>
        <el-tag
          v-for="item in labelList"
          :key="item.id"
          @click="editLabel(item, true)"
          closable
          @close="labeClose(item)"
          >{{ item.name }}
        </el-tag>
      </div>
    </div>

    <el-dialog
      :title="addLabelType ? '新增区域' : '修改区域'"
      :visible.sync="dialogAddlabel"
      @close="cancel"
    >
      <el-form :model="addlabel">
        <el-form-item label="区域名称" label-width="120px">
          <el-input v-model="addlabel.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmLabel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  questionOtherList,
  questionOtherAdd,
  questionOtherEdit,
  questionOtherDel,

  streetList,
  streetAdd,
  streetEdit,
  streetDel
} from "@/api/configApi";
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters(["type"]),
  },
  props: {
    Listtype :{
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogAddlabel: false,
      labelList: [],
      region_id: this.$store.state.user.region_id,
      addLabelType: false,
      addlabel: {
        name: "",
        id: "",
      },
    };
  },
  async mounted() {
    this.questionOtherList();
  },
  methods: {
    questionOtherList() {
      streetList({
        region_id: this.region_id,
        page: 1,
        limit: 999,
      }).then((res) => {
        this.labelList = res.list;
      });
    },
    confirmLabel() {
      if (this.addLabelType) {
        streetAdd({
        // region_id: this.region_id,
        name: this.addlabel.name,
        sort: 0,
        }).then((res) => {
          this.questionOtherList();
          this.dialogAddlabel = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        });
      } else {
        streetEdit({
          street_id: this.addlabel.id,
          name: this.addlabel.name,
          sort: 0,
        }).then((res) => {
          this.dialogAddlabel = false;
          this.questionOtherList();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        });
      }
    },
    cancel() {
      this.addlabel.name = "";
      this.addlabel.id = "";
      this.dialogAddlabel = false;
    },
    addLabel(type) {
      this.addLabelType = true;
      this.dialogAddlabel = true;
    },
    editLabel(item, type) {
      this.addLabelType = false;
      this.addlabel.name = item.name;
      this.addlabel.id = item.id;
      this.dialogAddlabel = true;
      console.log(this.addlabel);
    },
    labeClose(item) {
      this.$confirm("确定删除区域吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async (res) => {
          console.log(item);
          streetDel({
            street_id: item.id,
          })
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.questionOtherList();
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        })
        .catch(() => {
          this.addlabel.name = "";
          this.addlabel.id = "";
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
.label_list .el-tag {
  margin-left: 10px;
  margin-top: 5px;
}
</style>
